<template>
  <div class="rootContainer">
    <div style="width: 100%; background-color: dimgray;height: 50px;margin-bottom: 20px;">
      <el-page-header @back="goBack" content="返回工具菜单" style="margin-top: 10px;float: left;"></el-page-header>
      <el-button type="primary" @click="changeDB" style="float: left;width: 140px;margin-left: 40px;margin-top: 5px;" round>切换数据库</el-button>
    </div>
    <div style="text-align: left; margin-bottom: 20px;margin-left: 20px;">
      <span>数据库名称：</span>
      <el-input
        type="text"
        placeholder="数据库名称"
        v-model="searchName"
        style="width: 200px;"
        @keyup.enter.native="searchTable"
      >
      </el-input>
      <el-button type="primary" @click="searchTable">
        搜索
      </el-button>
      <div style="float: right; margin-right: 30px;">
        <span v-html="'共查询到 ' + tableList.length + ' 条'"></span>
      </div>
    </div>
    <el-table
      :data="tableList"
      style="width: 100%"
      border
      height="600"
    >
      <el-table-column
        prop="tableName"
        label="数据库表名"
        header-align="center"
        align="center"
        width="500">
        <template slot-scope="slot">
          <span>{{ slot.row.tableName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="数据库注释"
        header-align="center"
        align="center"
        width="400">
        <template slot-scope="slot">
          <span>{{ slot.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250"
        header-align="center"
        align="center"
      >
        <template slot-scope="slot">
          <el-button type="success" @click="openImportDlg(slot.row)" round>导入数据</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import {get} from "../../utils/httpUtil";

    export default {
        name: "TableList"
      ,computed:{

      }
      ,data () {
          return {
            importDlgVisible: false
            ,tableList: []
            ,baseTableList: []
            ,searchName: ""
            ,dbToolMenuUrl: '/dbToolMenu'
            ,dbConnectUrl: '/'
            ,importExcelDataUrl: '/importExcelData'
          }
      }
      ,methods: {
        initTableList() {
          get("/db/getTableList", {}).then(response => {
            if (response.data.result) {
              this.tableList.splice(0, this.tableList.length)
              this.baseTableList = response.data.data
              this.baseTableList.forEach(item => {
                this.tableList.push(Object.assign({}, item))
              })
            } else {
              this.$message({
                message: '获取数据库表列表失败！',
                type: 'error'
              });
            }
          })
        },
        goBack() {
          this.$router.push(this.dbToolMenuUrl)
        }
        ,changeDB() {
          this.$router.push(this.dbConnectUrl)
        }
        ,openImportDlg(row) {
          this.$router.push(this.importExcelDataUrl + "?tableName="+row.tableName)
        }
        ,searchTable() {
          this.tableList.splice(0, this.tableList.length)
          let searchName = this.searchName.toLowerCase()
          this.baseTableList.forEach(item => {
            let currentName = item.tableName.toLowerCase()
            if (currentName.indexOf(searchName) != -1) {
              this.tableList.push(item)
            }
          })
        }
      }
      ,beforeMount() {
          this.initTableList()
      }
    }
</script>

<style scoped>
  .rootContainer {
    width: 100%;
  }
  .inputBox {
    width: 250px;
  }
</style>
